<template>
  <div class="cloudresource">
    <div class="cloudresource-search">
      <el-input
        @keyup.enter.native="resourceHandleFilter"
        placeholder="名称"
        style="width:240px;"
        v-model="listQuery.searchValue"
      />
      <el-button @click="resourceHandleFilter" size="medium" type="primary">搜索</el-button>
      <el-button @click="clearParams" size="medium" type="info">清空</el-button>
    </div>
    <div class="cloudresource-type">
      <dl>
        <dt>类型：</dt>
        <dd
          v-for="(item,index) in typeArr"
          :class="{active:item.code === typeItem}"
          :key="index"
          @click="typeItem=item.code,getData()"
        >{{ item.title }}
        </dd>
      </dl>
    </div>
    <!--<div class="cloudresource-mark">-->
      <!--<dl>-->
        <!--<dt>标签：</dt>-->
        <!--<dd-->
          <!--v-for="(item,index) in markArr"-->
          <!--:class="{active:item.name === markItem}"-->
          <!--:key="index"-->
          <!--@click="markItem=item.name,getData()"-->
        <!--&gt;{{ item.name }}-->
        <!--</dd>-->
      <!--</dl>-->
    <!--</div>-->
    <el-table
      :table-label="tableLabel"
      :table-data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
    >
      <el-table-column slot="button" :min-width="1.5" label="操作" prop="manage" align="center">
        <template slot-scope="scope">
          <!--<el-button @click="previewPdf(scope.row)">-->
            <!--<div class="images" v-viewer="{ navbar: false}">-->
              <!--<img v-for="(src) in images" style="width: 100%" :src="src" :key="src" hidden>-->
              <!--预览-->
            <!--</div>-->
          <!--</el-button>-->
          <el-button @click="deleteCLick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :current-page="currentPage"
      :page-size="pagesize"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <detail-dialog
      :dialog="detailDialog"
      :src="src"
      :beta="beta"
      @closeDetail="detailDialog = false"
    />
    <label-dialog :dialog="labelDialog" @closeLabel="labelDialog = false"/>

    <el-dialog
      :visible="showDoc === true || showPdf === true  || showVideo === true"
      :show-close="true"
      :width="'80%'"
      class="dialog-div-pre-style"
      :before-close="closePreviewClick"
      center>
      <div v-if="showDoc === true" class="dialog-body-content-base-style">
        <iframe frameborder="0"
                :src="'https://view.officeapps.live.com/op/view.aspx?src=' + this.fileUrl"
                width='100%'>
        </iframe>
      </div>
      <div v-else-if="showPdf === true" class="dialog-body-content-base-style" style="justify-content: center; align-items: center">
        <embed :src="pdfUrl" style="width: 100%; height: 500px"/>
      </div>
      <div v-else-if="showVideo === true"
           class="dialog-body-content-base-style"
           style="justify-content: center; align-items: center">
        <video-player class="video-player vjs-custom-skin"
                      ref="positiveVideoPlayer"
                      :playsinline="true"
                      :options="positivePlayerOptions"
        ></video-player>
      </div>
    </el-dialog>
    <!-- 删除 -->
    <el-dialog :visible.sync="handleDelete" width="25%">
      <div style="width:100%;float:left;height:42px;">确定要删除吗?</div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deleteData(deleteRow)">确定</el-button>
        <el-button @click="handleDelete = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 删除 -->

  </div>
</template>

<script>
  import DetailDialog from './components/cloudresource/detailDialog'
  import LabelDialog from './components/cloudresource/labelDialog';


  import {deleteCourseMaterial, list, listResource} from "@/api/cloud/course_material"; // 数据接口
  import {tagList} from "@/api/subject/tag"; // 数据接口
  import {scrollTo} from '@/utils/scrollTo'; // 上下滑动组件
  import {getTenantId} from '@/utils/auth';
  import ElTable from '@/components/Eltable';
  import Pagination from '@/components/Pagination';

  export default {
    components: {
      DetailDialog,
      LabelDialog,
      ElTable,
      Pagination
    },
    data() {
      return {
        currentPage: 1,
        datevalue: '',
        detailDialog: false,
        labelDialog: false,
        src: '',
        beta: '',
        Data: [],
        listQuery: {searchValue: ''},
        optionItem: '按课程',
        optionItemArr: [
          {
            label: '按课程',
            value: '按课程'
          }, {
            label: '按标题',
            value: '按标题'
          }, {
            label: '按用户',
            value: '按用户'
          }
        ],
        transcodeStatus: '转码成功',
        transcodeStatusArr: [
          {
            label: '转码中',
            value: '转码中'
          }, {
            label: '转码成功',
            value: '转码成功'
          }, {
            label: '转码失败',
            value: '转码失败'
          }
        ],
        userStatus: '已使用',
        userStatusArr: [
          {
            label: '已使用',
            value: '已使用'
          }, {
            label: '未使用',
            value: '未使用'
          }
        ],
        typeItem: '',
        markItem: '',
        typeArr: [
          {
            code: '',
            title: '全部'
          },
          {
            code: 'video',
            title: '视频'
          },
          {
            code: 'audio',
            title: '音频'
          },
          {
            code: 'pic',
            title: '图片'
          },
          {
            code: 'doc',
            title: '文档'
          },
          {
            code: 'ppt',
            title: 'PPT'
          },
          {
            code: 'other',
            title: '其他'
          }
        ],
        markArr: [],
        total: 0,
        pagesize: 10,
        tableLabel: [
          {
            label: '文件名称', width: '1', prop: 'title'
          }, {
            label: '类型', width: '1', prop: 'type', isOpera: true
          }, {
            label: '大小', width: '1', prop: 'fileSize'
          }, {
            label: '上传时间', width: '1', prop: 'createTimeStr', isOpera: true
          }
        ],
        tableData: [],
        handleDelete: false,
        deleteRow: '',
        deleteCLick(row) {
          this.handleDelete = true;
          this.deleteRow = row;
        },
        showDoc: false,
        showPdf: false,
        showVideo: false,
        fileUrl: '',
        images: [],
        pageCount: 0, // pdf文件总页数
        pdfUrl: "",
        scale: 1.0,
        /**
         *播放器配置
         */
        positivePlayerOptions: {
          playbackRates: [0.5, 1.0, 1.5, 2.0], //播放速度
          autoplay: false, //如果true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: 'zh-CN',
          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [{
            type: "",
            src: "" //视频url地址
          }],
          poster: "", //你的封面地址
          notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true  //全屏按钮
          },
          common: "positivePlayer",
        }
      }
    },
    mounted() {
      this.getData();
      this.getTagData();
    },
    methods: {
      // 数据检索
      resourceHandleFilter() {
        this.listResource()
      },
      clearParams() {
        this.listQuery.searchValue = '';
        this.getData()
      },
      listResource() {
        listResource(getTenantId(), this.listQuery.searchValue).then(response => {
          this.tableData = response.data.items;
          this.total = response.data.items.length;
        })
      },
      //接口获取数据
      getData() {
        list(getTenantId(), this.typeItem, this.markItem).then(response => {
          this.tableData = response.data.items;
          this.total = response.data.items.length;
        });
      },
      getTagData() {
        tagList(getTenantId()).then(response => {
          this.markArr = response.data.items;
        });
      },
      handleSizeChange(val) {
        this.currentPage = 1
        this.pagesize = val.value
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      handleCurrentChange(val) {
        this.currentPage = val.value
        if (this.pagesize >= 20) {
          scrollTo(50, 800)
        }
      },
      deleteData(row) {
        this.handleDelete = false;
        deleteCourseMaterial(row.id).then(() => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          });
          this.getData();
        })
      },
      /**
       * pdf预览
       */
      previewPdf(row) {
        let type = this.iconByType(row);
        this.fileUrl = row.url;
        if (type.indexOf("doc") !== -1 || type.indexOf("docx") !== -1 || type.indexOf("xsl") !== -1 || type.indexOf("xslx") !== -1) {
          this.showDoc = true
        } else if (type.indexOf("pdf") !== -1) {
          this.pdfUrl = row.fileUri;
          this.showPdf = true
        } else if (type.indexOf("jpg") !== -1 || type.indexOf("png") !== -1 || type.indexOf("jpeg") !== -1) {
          this.images = [];
          this.images.push(row.fileUri);
          const viewer = this.$el.querySelector('.images').$viewer;
          viewer.show()
        } else if (type.indexOf("avi") !== -1 || type.indexOf("mp4") !== -1 || type.indexOf("webm") !== -1 || type.indexOf("m4v") !== -1 || type.indexOf("rmvb") !== -1 || type.indexOf("mpg") !== -1 || type.indexOf("3gp") !== -1 || type.indexOf("swf") !== -1 || type.indexOf("mkv") !== -1) {
          this.positivePlayerOptions.sources[0].src = row.fileUri;
          this.positivePlayerOptions.sources[0].type = "video/mp4";
          this.showVideo = true
        } else {
          this.$message("当前文件暂不支持预览")
        }
      },
      /**
       * 通过文件后缀返回文件的图标
       */
      iconByType(row) {
        return row.fileUri.substring(row.fileUri.lastIndexOf(".") + 1, row.fileUri.length)
      },
      closePreviewClick() {
        if (this.showDoc === true) {
          this.showDoc = false
        } else if (this.showPdf === true) {
          this.showPdf = false
        } else if (this.showVideo === true) {
          this.showVideo = false
        }
      }
    }
  }
</script>

<style lang="scss">
  .cloudresource {
    padding: 0 20px;

    .manage-button {
      width: 100%;
      height: 50px;
      overflow: hidden;
      line-height: 50px;
    }

    .el-table_2_column_8 {
      text-align: center;
    }

    .file-wrap {
      width: 100%;
      height: 75px;
      position: relative;

      .el-button {
        position: absolute;
        left: 190px;
        top: 0;
        padding-top: 5px;
      }

      p {
        position: absolute;
        left: 190px;
        bottom: 0;
        margin: 0;
        margin-bottom: 5px;
      }

      .img-wrap {
        width: 180px;
        height: 100%;
        position: absolute;
        left: 5px;
        border-radius: 5px;
        background-color: #000;

        .innerImg {
          width: 100%;
          height: 100%;
        }

        .clickbutton {
          display: none;
          position: absolute;
          top: 27px;
          left: 60px;
          padding: 1px 5px;
          font-size: 12px;
          line-height: 1.5;
          border-radius: 3px;
          background-color: #409eff;
          border-color: #409eff;
          color: #fff;
          cursor: pointer;
        }

        .clickbutton:hover {
          opacity: 0.8;
        }
      }

      .img-wrap:hover {
        .innerImg {
          opacity: 0.5;
        }

        .clickbutton {
          display: block;
        }
      }
    }

    &-search {
      margin-top: 20px;
      margin-left: 10px;
    }

    &-type {
      position: relative;
      margin: 0;
      border-bottom: 1px solid #ddd;
      overflow: hidden;

      dd,
      dt {
        float: left;
        margin-right: 10px;
        padding: 10px 0;
      }

      dd:hover {
        color: #409eff;
        cursor: pointer;
      }

      dd.active {
        color: #409eff;
      }
    }

    &-mark {
      position: relative;
      margin: 0;
      border-bottom: 1px solid #ddd;
      overflow: hidden;

      dt {
        float: left;
        margin-right: 10px;
        padding: 10px 0;
      }

      dd {
        float: left;
        padding: 0.2em 0.6em 0.3em;
        font-size: 75%;
        font-weight: 700;
        line-height: 1;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        vertical-align: baseline;
        margin-top: 10px;
        border-radius: 0.25em;
        background-color: #409eff;
      }

      dd:hover {
        opacity: 0.8;
        cursor: pointer;
      }

      dd.active {
        background-color: #fd8829;
        color: #fff;
      }
    }

    &-filter {
      position: relative;
      margin: 0;
      border-bottom: 1px solid #ddd;
      overflow: hidden;

      dt {
        float: left;
        margin-right: 10px;
        padding: 10px 0;
      }

      .el-date-editor {
        margin-left: 40px;
        margin-right: 4px;
      }
    }
  }
</style>
